<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>文件管理</el-breadcrumb-item>
    <el-breadcrumb-item>回收站管理</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 内容区域 -->
  <el-card class="box-card">
    <!-- 搜索条件 -->
    <el-row :gutter="15">
      <el-col>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入文件名">
              <el-button slot="append" icon="el-icon-search" @click="searchComments"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="danger" @click="search">删除</el-button>
          </el-col>
        </el-row>

        <el-table ref="multipleTable" :data="fileList" tooltip-effect="dark" style="width: 100%" >
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column prop="fileId" label="文件id" width="150"></el-table-column>
          <el-table-column prop="userId" label="用户id" width="150"></el-table-column>
          <el-table-column prop="fileName" label="文件名" width="300"></el-table-column>
          <el-table-column prop="fileSize" label="文件大小" width="300"></el-table-column>
          <el-table-column prop="fileStatus" label="文件状态" width="200">
            <template #default="scope">
              <span>{{ scope.row.fileStatus == 1 ? '回收站' : '存在' }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total"
                       :current-page="queryParams.pageNum" :page-sizes="[1, 5, 10]"
                       :page-size="queryParams.pageSize" />
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import {inject, onMounted, ref} from 'vue';
import axios from '@admin/utils/request.js';

let $message = inject('$message');

// 查询参数
const queryParams = ref({
  reclaimIds: '3'
});
// 查询结果
const fileList = ref([]);

// 获取评论列表
const search = () => {
  axios.get('/reclaim/user/' + queryParams.value.reclaimIds).then(response => {
    console.log(response.data)
    fileList.value = response.data;
    queryParams.value.pageNum = response.data.pageNum;
    queryParams.value.pageSize = response.data.pageSize;
    queryParams.value.total = response.data.length;
    console.log(queryParams.value)
  })
};

// 组件挂载时调用 search 方法
onMounted(() => {
  search();
});
</script>